<template>
	<view>
		<u-navbar title="提取视频内容" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="flex-col page">
			<view class="flex-col self-stretch group_2 mt-23">
				<view class="flex-col section">
					<view class="flex-col">
						<view class="flex-row items-center self-stretch">
							<image class="image_3"
								src="https://terminator.axu9.com/images/lianjie-icon.png" />
							<text class="font ml-9-5">链接文案提取</text>
						</view>
						<!-- <text class="self-start text_2 mt-17">粘贴你的视频链接</text> -->
						<textarea v-model="link" placeholder="粘贴你的视频链接" placeholder-class="self-start text_2 mt-17" class="self-start font mt-17" maxlength="1000"/>
					</view>
					<view class="flex-row group_3">
						<view @click="pasteLink" class="flex-col justify-start items-center text-wrapper"><text class="font_2">粘贴链接</text>
						</view>
						<view @click="extract" class="ml-14 flex-col justify-start items-center text-wrapper_2">
							<text class="font text_3">提取</text>
						</view>
					</view>
				</view>
				<view v-if="audioUrl != ''" class="flex-col section_2 mt-15">
					<text class="self-start font_3">音频内容</text>
					<view class="flex-col self-stretch mt-22-5">
						<view class="flex-row items-center section_3">
							<image class="image_4"
								:src="commonData.createData.audioSelectIcon" />
							<text class="font text_4 ml-3-5">{{audioName}}</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper_3 mt-14-5">
							<text class="font_2">选择音频</text>
						</view>
					</view>
				</view>
				<view v-if="videoContent != ''" class="flex-col section_4 mt-15">
					<text class="self-start font_3">文本内容</text>
					<view class="flex-col justify-start items-center self-stretch image-wrapper">
							{{videoContent}}
					</view>
					<view class="flex-row self-stretch group_4">
						<view @click="startRec" class="flex-col justify-start items-center text-wrapper"><text class="font_2">开始录制</text>
						</view>
						<view @click="create" class="ml-14 flex-col justify-start items-center text-wrapper_2">
							<text class="font_2 text_5">生成</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showPop" mode="center" :custom-style="customStyle" :mask-custom-style="maskCustomStyle">
			<!-- <view class="popup"> -->
				<view class="flex-col flex-1 popup ml-7-5" :style="{backgroundImage: 'url(' + commonData.showIntegalPopData.byaudioPopBg +')'}">
				  <text class="self-center title">提取说明</text>
				  <view class="flex-col self-stretch mt-16-5">
				   <text class="content">
				     {{agreement}}
				    </text>
					<!-- <rich-text :nodes="content"></rich-text> -->
				    <view class="flex-row items-center bottom">
				      <image
						v-if="!checked"
						@click="changAgree"
				        class="image_check"
				        src="https://terminator.axu9.com/images/uncheck.png"
				      />
					  <image 
						v-else
						@click="changAgree"
					    class="image_check"
					    :src="commonData.createData.checked"
					  />
				      <text class="ml-6 text_agree">已知并同意{{title}}</text>
				    </view>
				    <view class="flex-row bottom-btn">
				      <view @click="noAgree" class="flex-col justify-start items-center agree-btn"><text class="font-noagree">不同意</text></view>
				      <view @click="Agree" class="ml-14 flex-col justify-start items-center noagree-btn">
				        <text class="font-agree">同意并继续</text>
				      </view>
				    </view>
				  </view>
				</view>
			<!-- </view> -->
		</u-popup>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import { getAgreement } from "@/api/video.js"
	export default {
		data() {
			return {
				isAgree: false,
				showPop: false,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				// customStyle: {
				// 	background: 'rgba(0, 0, 0, 0)',
				// 	backgroundColor: 'rgba(0, 0, 0, 0)'
				// },
				checked: false,
				videoContent: '',
				link: '',
				title: '',//标题
				agreement: '',//协议名称
				content: '',//协议内容
				audioUrl: '',//音频路径
				audioName: '',//音频名称
				videoPath: '',//视频路径
				toOptionType: 1,//跳转类型 1音视频合成 2音频库--添加音频 3添加音频
				commonData: {}
			}
		},
		onLoad(options) {
			this.commonData = commonData;
			console.log(options,'options')
			this.videoPath = options.videoPath;
			this.toOptionType = options.toOptionType;
			this.toAddType = options.toAddType ? options.toAddType : 1;
			this.clickoption  = options.clickoption ? options.clickoption : 1;
			this.getAgree()
			this.isAgree = uni.getStorageSync('isAgree') ? uni.getStorageSync('isAgree') : false;
			if (!this.isAgree) {
				this.showPop = true;
			}
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			// 协议获取
			getAgree(){
				getAgreement({
					id: 2
				}).then(res => {
					console.log(res,'协议获取')
					this.title = res.data.title;
					this.agreement = res.data.description;
					this.content = res.data.content;
				}).catch(err => {
					
				})
			},
			changAgree(){
				this.checked = !this.checked;
			},
			noAgree(){
				uni.navigateBack({
					delta: 1
				})
				uni.setStorageSync('isAgree',false);
			},
			Agree(){
				if(!this.checked){
					uni.showToast({
						title: '请勾选阅读同意协议',
						icon: 'none'
					})
					return
				}
				this.showPop = false;
				uni.setStorageSync('isAgree',true);
			},
			// 粘贴链接
			pasteLink(){
				var _this = this;
				wx.getClipboardData({  
				    success(res) {  
						_this.link = res.data
				         
				      
				    }  
				  });  
			},
			// 提取
			extract(){
				if(this.link == ''){
					uni.showToast({
						title: '链接不能为空',
						icon: 'none'
					})
					return
				}
				this.audioUrl = "https://audiovideo.axa2.com/20240812/66b9c1033bb15.m4a";
				this.audioName = "111.m4a";
				this.videoContent = "今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚，今天是美好的一天，阳光明媚今天是美好的一天，阳光明媚"
			},
			// 开始录制
			startRec(){
				uni.navigateTo({
					url:'/pagesCreate/addAudio/index?toAddType=5' + '&toOptionType=' + this.toOptionType + '&videoPath=' + this.videoPath + '&wenan=' + this.videoContent + '&clickoption=' + this.clickoption
				})
			},
			// 生成
			create(){
				uni.navigateTo({
					url: '/pagesCreate/addAudioByText/index?clickoption=2' + '&toOptionType=' + this.toOptionType + '&videoPath=' + this.videoPath + '&videoContent=' + this.videoContent
				})
			}
		}
	}
</script>
<style>
	@import url(../../static/css/common.css);
	page {
		padding: 35rpx 0 45rpx;
		background-color: #111113;
		width: 100%;
		/* overflow-y: auto;
		overflow-x: hidden;
		height: 100%; */
	}
</style>
<style lang="less" scoped>
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style lang="scss" scoped>
	.mt-23 {
		margin-top: 46rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.mt-98-5 {
		margin-top: 197rpx;
	}

	.mt-22-5 {
		margin-top: 45rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}



	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		padding: 0 20rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.section {
		padding: 41rpx 30rpx 38rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.image_3 {
		width: 33rpx;
		height: 33rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.text_2 {
		margin-left: 12rpx;
		color: #72777f;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
	}

	.group_3 {
		padding: 0 16rpx;
	}

	.text-wrapper {
		flex: 1 1 286rpx;
		padding: 30rpx 0;
		border-radius: 16rpx;
		height: 90rpx;
		border-left: 2rpx solid $theme-color;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: $theme-color;
	}

	.text-wrapper_2 {
		flex: 1 1 286rpx;
		padding: 30rpx 0;
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		border-radius: 16rpx;
		height: 88rpx;
	}

	.text_3 {
		line-height: 28rpx;
	}

	.section_2 {
		padding: 46rpx 30rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.section_3 {
		padding: 28rpx 18rpx 17rpx;
		background-color: #39444069;
		border-radius: 20rpx;
	}

	.image_4 {
		width: 81rpx;
		height: 74rpx;
	}

	.text_4 {
		line-height: 31rpx;
	}

	.text-wrapper_3 {
		padding: 28rpx 0;
		border-radius: 16rpx;
		border: 2rpx solid $theme-color;
	}

	.section_4 {
		padding: 46rpx 27rpx 0 30rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.image-wrapper {
		margin-top: 32rpx;
		padding: 30rpx 20rpx 16rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #c8c8c8;
		background-color: #212123;
		border: 2rpx solid #8f9192;
		height: 214rpx;
		overflow-y: scroll;
	}

	.image_5 {
		width: 557rpx;
		height: 168rpx;
	}

	.group_4 {
		padding: 28rpx 17rpx;
	}

	.text_5 {
		color: #fefefe;
		line-height: 28rpx;
	}
	/* .popup {
		
	} */
	.ml-7-5 {
	  margin-left: 15rpx;
	}
	.mt-16-5 {
	  margin-top: 33rpx;
	}
	.image_check {
	  width: 30rpx;
	  height: 30rpx;
	}
	.popup {
	  // margin-right: 40rpx;
	  padding: 59rpx 28rpx 30rpx;
	  border-radius: 32rpx;
	  // background-image: url('https://terminator.axu9.com/images/video-pop-bg.png');
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 615rpx;
	  // height: 616rpx;
	}
	.title {
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	  font-weight: 500;
	  color: #ffffff;
	}
	
	.content {
	  margin-left: 6rpx;
	  color: #ffffff;
	  font-size: 26rpx;
	  font-family: PingFang SC;
	  line-height: 54rpx;
	  text-align: center;
	  height: 270rpx;
	  overflow-y: scroll;
	}
	.bottom {
	  margin-top: 26rpx;
	}
	.text_agree {
	  color: #ffffff;
	  font-size: 22rpx;
	  font-family: PingFang SC;
	  line-height: 22rpx;
	}
	.bottom-btn {
	  margin-top: 35rpx;
	}
	.agree-btn {
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  border-radius: 16rpx;
	  height: 102rpx;
	  border: 2rpx solid $theme-color;
	}
	.font-noagree {
		color: $theme-color;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}
	
	.noagree-btn {
	  margin-right: 5rpx;
	  padding: 34rpx 0;
	  flex: 1 1 257rpx;
	  background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
	  border-radius: 16rpx;
	  height: 100rpx;
	}
	/* .text_6 {
	  color: #ffffff;
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	} */
</style>